<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    icon: String,
    text: String,
  },
});
</script>

<template>
  <view class="menu-btn">
    <image class="menu-btn-icon" :src="icon" />
    <view class="menu-btn-text">{{ text }}</view>
  </view>
</template>

<style lang="scss">
.menu-btn {
  width: 64rpx;

  .menu-btn-icon {
    display: block;
    width: 44rpx;
    height: 44rpx;
    margin: 0 auto 4rpx;
  }

  .menu-btn-text {
    font-size: 20rpx;
    color: #666666;
    line-height: 28rpx;
    text-align: center;
  }
}
</style>